<template>
  <div class="detail">
    <!-- 轮播图组件 -->
    <Img :pics="detailObj.pics2"></Img>
    <!-- 基本信息组件 -->
    <Base :basicInfo="detailObj.basicInfo"></Base>
    <!-- 商品详情与商品评价的切换 -->
    <van-tabs>
      <van-tab title="商品详情">
        <!-- 商品详情组件 -->
        <Content :content="detailObj.content"></Content>
      </van-tab>
      <van-tab title="商品评价">
        <!-- 商品评价组件 -->
        <Report :goodsid="$route.query.id"></Report>
      </van-tab>
    </van-tabs>

    <!-- 商品的底部导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="$store.getters.sum" @click="$router.push('/cart')"/>
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="test"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    <!-- 弹出层 -->
    <van-popup v-model="showPop" position="bottom" :style="{ height: '60%' }">
      <van-card
        :price="detailObj.basicInfo.minPrice"
        :title="detailObj.basicInfo.name"
        :thumb="detailObj.basicInfo.pic"
      >
      </van-card>
      <!-- sku规格 -->
      <section v-for="(item,key) in detailObj.properties" :key="item.id">
        <h5>
          {{item.name}}
        </h5>
        <ul class="sku">
          <li v-for="it in item.childsCurGoods" :key="it.id">
            <input type="radio" :value="it.id" :id="it.id" :name="item.name" v-model="sku[key]">
            <label :for="it.id">{{it.name}}</label>
          </li>
        </ul>
      </section>
      {{sku}}
      <!-- 数量 -->
      <van-cell title="购买数量" >
        <template>
          <van-stepper v-model="number" />
        </template>
      </van-cell>
      <van-button type="primary" block @click="addCart()">加入购物车</van-button>
    </van-popup>
  </div>
</template>

<script>
import Img from "@/components/Detail/Img";
import Base from "@/components/Detail/Base";
import Content from "@/components/Detail/Content";
import Report from "@/components/Detail/Report";
import qs from 'qs'
import {mapState,mapMutations} from 'vuex'
export default {
  name:"Detail",
  components: { Img, Base, Content, Report },
  data() {
    return {
      detailObj: {},
      showPop: false, //展示弹出层
      number:1,//购买数量
      sku:[],
      skuobj:{},//根据属性查询的价格信息
    };
  },
  // mounted() {
  //   console.log('df')
  //   var id = this.$route.query.id;
  //   this.getDetail(id);
  // },
  methods: {
    test(){
      this.showPop=true
      
    },
    ...mapMutations(['add','addNum']),
    async getDetail(id) {
      let { data: res } = await this.$http.get(
        "https://api.it120.cc/small4/shop/goods/detail?id=" + id
      );
      console.log(res);
      this.detailObj = res.data;
    },
    //1加入购物车
    addCart(){
      //判断登录
      if(!this.token){
        this.$toast.fail('请先登录')
        return this.$router.push('/login')
      }
      //判断有没有选择属性参数
      if(this.sku.length==0){
        //有一个提示用户没有选择操作，然后关闭弹框
        this.$notify({ type: 'danger', message: '请选择商品属性' })
        this.showPop=false
      }
      //开始加入购物车的操作
      //{goodsid pic number skuid  price flag}
      console.log(this.skuobj)
      var index=this.cart.findIndex((item)=>{
        return item.skuid==this.skuobj.propertyChildIds
      })
      if(index==-1){
        //不存在该规格的商品
        var obj={
          goodsId:this.skuobj.goodsId,
          pic:this.detailObj.basicInfo.pic,
          number:this.number,
          skuid:this.skuobj.propertyChildIds,
          skuname:this.skuobj.propertyChildNames,
          price:this.skuobj.price,
          flag:true
        }
        this.add(obj)
      }else{
        //存在
        var numobj={
          index:index,
          number:this.number
        }
        this.addNum(numobj)
      }
      //关闭tankuang
      this.showPop=false
    }
  },
  watch:{
    sku:{
      async handler(val){
        //要拼接的串
        var str=""
        //遍历属性获取sku的ID
        this.detailObj.properties.forEach((item,key)=>{
          if(val[key]){
            str+=item.id+":"+val[key]+","
          }
        })
        //去掉一个逗号
        str=str.substr(0,str.length-1)
        //组合请求的对象
        var obj={
          goodsId:this.$route.query.id,
          propertyChildIds:str
        }
        //请求接口
        let {data:res}=await this.$http.post("https://api.it120.cc/small4/shop/goods/price",qs.stringify(obj))
        console.log(res)
        this.skuobj=res.data;
      },
      deep:true
    }
  },
  computed:{
    ...mapState(['token',"cart"])
  },
  //当缓存页面的时候 组件缓存被执行钩子
  activated(){
   var id = this.$route.query.id;
    this.getDetail(id);
  },
  //离开路由钩子
  deactivated () {
    this.detailObj={}
    this.number=1
  }
};
</script>

<style lang="scss">
.detail {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.sku{
  width:100%;
  list-style:none;
  display: flex;
  flex-wrap: wrap;
  li{
    width:100px;
    height:40px;
    margin:5px;
    label{
      display: inline-block;
      width:100%;
      height:100%;
      border:1px solid;
      text-align: center;
      line-height: 40px;
    }
  }
  input[type='radio']:checked+label{
    border:1px solid red;
  }
  input[type='radio']{
    display: none;
  }
}
</style>